<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<ul class = "list1">
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    /*
    * 对比 HTMLCollection 和 NodeList 之间的区别
    *
    * */
    let collectionList = document.getElementsByTagName("li") //动态地获取元素

    let nodeListList = document.querySelectorAll("li") //静态地获取元素，这一瞬间是多少，以后就是多少

    console.log(collectionList.length) //3
    console.log(nodeListList.length) //3

    //获取之后进行操作
    //添加一个你标签到里面

    let ul = document.querySelector("ul")

    let li = document.createElement("li")
    ul.appendChild(li)

    console.log(collectionList.length) //4
    console.log(nodeListList.length) //3


</script>
</body>
</html>